<template>
  <div class="issue">
    <span class="link" @click="show=true;searchHandle()">查 看</span>

    <el-dialog
      :title="item.title + ' - '+item.village_title"
      :visible.sync="show"
      width="1200px"
      class="list"
    >
      <div class="body">
        <div class="table">
          <el-table ref="selects" :data="list" v-loading="loading" border>
            <el-table-column label="标准名称" prop="standard_title"></el-table-column>
            <el-table-column label="问题" prop="issue"></el-table-column>
            <el-table-column label="整改前图片" prop="title" width="122">
              <template slot-scope="scope">
                <div
                  class="img"
                  @click="img.show=true;img.src = scope.row.img_before"
                  :style="{backgroundImage:'url('+scope.row.img_before_thumb+')',width:'100px',height:'100px',backgroundRepeat: 'no-repeat',backgroundPosition: 'center',cursor:'pointer'}"
                ></div>
              </template>
            </el-table-column>
            <el-table-column label="整改后图片" prop="title" width="122">
              <template slot-scope="scope">
                <div
                  class="img"
                  @click="img.show=true;img.src = scope.row.img_after"
                  :style="{backgroundImage:'url('+scope.row.img_after_thumb+')',width:'100px',height:'100px',backgroundRepeat: 'no-repeat',backgroundPosition: 'center',cursor:'pointer'}"
                ></div>
              </template>
            </el-table-column>
            <el-table-column label="未通过理由" prop="check_info"></el-table-column>
            <el-table-column label="村备注信息" prop="info_after"></el-table-column>
          </el-table>
          <div class="action after mt-10">
            <div class="left">
              <div class="series">
                <el-radio-group v-model="series.type" size="small" @change="searchHandle">
                  <el-radio-button :label="0">整改未通过</el-radio-button>
                  <el-radio-button :label="1">未整改</el-radio-button>
                  <el-radio-button :label="2">整改已备注</el-radio-button>
                </el-radio-group>
              </div>
              <ul class="download">
                <li v-if="user.type==0">
                  <!-- 管理员下载 有时间 -->
                  <span @click="setDownloadTime(item,1)" v-if="!item.admin_download_time">
                    <el-link
                      type="primary"
                      :href="'/admin/Index/download_issue?admin=1&id='+item.id+'&type='+user.type"
                      target="_blank"
                      :underline="false"
                    >管理员下载</el-link>
                  </span>
                  <el-tooltip
                    effect="dark"
                    :content="'时间 : '+item.admin_download_time"
                    placement="top"
                    v-else
                  >
                    <el-link
                      type="danger"
                      :href="'/admin/Index/download_issue?id='+item.id"
                      target="_blank"
                      :underline="false"
                    >管理员已下载</el-link>
                  </el-tooltip>
                </li>
                <li v-if="series.type==0">
                  <!-- 整改未通过 -->
                  <el-link
                    type="primary"
                    :href="'/admin/Index/download_issue_error?id='+item.id+'&type=0'"
                    target="_blank"
                    :underline="false"
                  >下 载 ({{item.issue_sum_after_no_pass}})</el-link>
                </li>
                <li v-if="series.type==1">
                  <!-- 未整改 -->
                  <el-link
                    type="primary"
                    :href="'/admin/Index/download_issue_error?id='+item.id+'&type=1'"
                    target="_blank"
                    :underline="false"
                  >下 载 ({{item.issue_sum_before - item.issue_sum_after - item.issue_sum_after_no_pass}})</el-link>
                </li>
                <li v-if="series.type==2">
                  <!-- 整改已备注 -->
                  <el-link
                    type="primary"
                    :href="'/admin/Index/download_issue_error?type=2&id='+item.id"
                    target="_blank"
                    :underline="false"
                  >下 载 ({{item.issue_sum_after_info}})</el-link>
                </li>
              </ul>
            </div>
            <div class="right">
              <el-pagination
                layout="total,prev, pager, next"
                :total="page.count"
                :page-size="page.size"
                @current-change="pageChange"
                :current-page="page.current"
              ></el-pagination>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="图片详情" :visible.sync="img.show" width="50%" class="img-show">
      <img :src="img.src" alt />
      <div class="down" @click="img.show = false;img.src=''">
        <i class="fa fa-times"></i>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: "",
      show: false,
      // 页码(默认条数,页数,总数量)
      page: {
        size: 10,
        current: 1,
        count: 0
      },
      series: {
        type: 0
      },
      user: this.$store.state.user,
      img: {
        show: false,
        src: ""
      },
      loading: false
    };
  },
  props: ["item"],
  methods: {
    // 页码改变
    pageChange(val) {
      this.page.current = val;
      this.searchHandle();
    },
    searchHandle() {
      // 加载
      this.loading = true;
      var type = this.series.type,
        item = this.item,
        page = this.page,
        data = {
          type: type,
          id: item.id,
          // 页码
          page: {
            current: page.current,
            size: page.size
          }
        };
      this.axios.post("/admin/Index/search_issue_type", data).then(ref => {
        var ref = ref.data;
        if (ref.state) {
          this.list = ref.other.data;
          page.count = ref.other.count;
          // 管理加载
          this.loading = false;
        } else {
          this.common.message({ message: ref.info, type: "error" });
        }
      });
    }
  }
};
</script>
<style scoped>
.list >>> .el-dialog__body {
  padding: 0px !important;
  margin-top: -1px;
}
.list >>> .el-dialog__body .action {
  padding: 15px;
  margin-top: 0 !important;
}
.list >>> .el-dialog__body .series {
  float: left;
}
.list >>> .el-dialog__body .download {
  float: left;
}
.list >>> .el-dialog__body .download li {
  float: left;
  margin-left: 20px;
}

/* 图片展示 */
.img-show >>> .el-dialog {
  border-radius: 5px;
  overflow: hidden;
}
.img-show >>> .el-dialog__body {
  position: relative;
  font-size: 0;
  padding: 0 !important;
  text-align: center;
  line-height: 0;
}
.img-show >>> .el-dialog__header {
  display: none;
}

.img-show >>> .down {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 1);
}
</style>